<template>
  <div :class="['about-video', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="about-video-title">
      活动视频
    </div>
    <div class="video-list" v-if="videoList.length > 0">
      <div class="content" v-for="(item, index) in videoList" :key="index" :style="{ visibility: item.name ? '' : 'hidden' }">
        <div class="image">
          <client-only>
            <video-player
              :ref="'videoPlayer' + item.data_id"
              :options="PlayerArry[index]"
              @ended="onPlayerEnded($event)"
              @play="onPlayerPlay($event, item.data_id)"
              :playsinline="true"
              class="video-player vjs-custom-skin" >
            </video-player>
          </client-only>
          <!-- <div class="time-long">
            <div class="mark" />
            <div class="text all-center">{{ item.time }}</div>
          </div> -->
        </div>
        <div class="title" :title="item.name">
          {{ item.name }}
        </div>
        <div class="foot">
          <span class="name">{{ item.art_name }}</span>
          <span class="date">{{ item.create_time }}</span>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <Pagin
      ref="page"
      v-show="videoList.length !== 0 && $ua.isFromPc()"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      :background="true"
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import Pagin from '@/components/pagin.vue'
export default {
  name: '',
  components: {
    Pagin
  },
  props: {},
  data () {
    return {
      VideoIndex: '',
      videoList: [],
      PlayerArry: [],
      currentPlayer: null,
      playerOptions: {//video-player组件播放视频所需的参数，此参数作为模板用于复制
        controls: true, // 是否显示控制栏
        // playbackRates: [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          // { type : "",src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'} //url地址
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,//视频画面宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,//当前时间和持续时间的分隔符
          durationDisplay: false,//显示持续时间
          remainingTimeDisplay: false,//是否显示剩余时间功能
          fullscreenToggle: true,  //全屏按钮
          progressControl: false,
          volumePanel: true
        },
        playtimes: 0,//视频播放起点
        preload: "auto"
      },
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.refresh()
  },
  methods: {
    getVideoTime (url, index) {
      const videoUrl = url;
      const video = document.createElement("video");

      video.addEventListener("loadedmetadata", () => {
        const duration = video.duration;
        this.$set(this.videoList[index], 'time', this.changeTime(duration))
      })
      console.log('this.videolist', this.videoList)

      video.setAttribute("src", videoUrl);
      video.setAttribute("preload", "metadata");
    },
    changeTime(duration) {
      const hour = parseInt((duration) / 3600);
      const minute = parseInt((duration % 3600) / 60);
      const second = parseInt(duration % 60);
      let result = ''
      if (hour > 0) {
        result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this.formatTimeStr(second)
      } else {
        result = this.formatTimeStr(minute) + ':' + 
        this.formatTimeStr(second)
      }
      console.log('result', result)
      return result //转化成分，秒
    },
    formatTimeStr(val) {
      if (val > 9) {
        return val
      } else {
        return '0' + val
      }
    },
    goDesc(data_id, type) {
      this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
    },
    refresh() {
      this.$refs.page.refresh()
    },
    onPlayerEnded(obj){//播放完成后进行回调
      // let oldValue = this.VideoIndex;
      this.VideoIndex = this.VideoIndex < (this.VideoArry.length - 1) ? this.VideoIndex + 1 : 0
      // this.VideoChange(oldValue, this.VideoIndex);
    },
    onPlayerPlay(player, data_id) {
      this.videoList.forEach(item => {
        if (item.url) {
          this.$refs['videoPlayer' + item.data_id].forEach(ele => {
            if (item.data_id !== data_id) {
              ele.player.pause()
            }
          })
        }
      })
    },
    getDataList(page, page_size, callback) {
      // 这里要写接口然后把数据和total丢进去
      let params = {
        page_num: page,
        page_count: page_size,
        special_id: this.$route.query.data_id
      }
      // 获取专题活动列表
      this.$api.getActivityVideo(params).then(res => {
        if (res.status == '$SUCCESS') {
          console.log('res.result.item_list', res.result.item_list)
          this.videoList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.videoList.forEach((v, i) => {
            let op = JSON.parse(JSON.stringify(this.playerOptions));
            op.sources = [{ type : "video/mp4" ,src: v.url }];
            op.poster = v.title_page || ''
            this.PlayerArry.push(op);
          })
          this.videoList.length > 0 && this.videoList.forEach((item, index) => {
            this.getVideoTime(item.url, index)
          })
          callback(this.videoList, res.result.total_count)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.about-video {
  &.z-web {
    .about-video-title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      line-height: 72px;
      text-align: center;
      margin-bottom: 32px;
    }

    .video-list {
      display: inline-flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 30px;

      .content {
        width: 320px;
        margin-bottom: 29px;
        cursor: pointer;

        .image {
          .video-player {
            width: 320px;
            height: 240px;
            position: relative;
          }

          ::v-deep(.vjs-custom-skin > .video-js) {
            height: 100%;
          }
        }

        // img {
        //   width: 320px;
        //   height: 180px;

        //   img {
        //     width: 100%;
        //     height: 100%;
        //   }
        // }

        .title {
          line-height: 18px;
          font-size: 16px;
          font-weight: 600;
          color: #000;
          margin: 12px 0;
          width: 320px;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap;
        }

        .time-long {
          .mark,
          .text {
            width: 72px;
            padding: 7px 9px;
            height: 24px;
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 12px;
            color: #FFF;
          }

          .mark {
            background: #000;
            opacity: 0.5;
          }
        }

        .foot {
          line-height: 16px;
          font-size: 16px;
          font-weight: bold;
          color: #999;
        }
      }
    }
  }

  &.z-phone {
    padding: 0 pxtorem(24) pxtorem(60);
    .about-video-title {
      font-size: pxtorem(36);
      font-weight: bold;
      text-align: center;
      color: #000000;
      margin: pxtorem(40) 0;
    }

    .video-list {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, pxtorem(340));
      grid-gap: 10px;

      .content {
        margin-bottom: pxtorem(32);
        .image {
          .video-player {
            width: pxtorem(340);
            height: pxtorem(265);
            position: relative;
          }

          ::v-deep(.vjs-custom-skin > .video-js) {
            height: 100%;
          }
        }
        .title {
          width: pxtorem(340);
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap;
          font-size: pxtorem(22);
          font-weight: 600;
          color: #000000;
          margin-top: pxtorem(17)
        }
      }
    }
  }
}
</style>
